{include file="public/header" /}
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <form action="{:url('recharge')}" class="layui-form" lay-filter="builderForm">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值会员</label>
                            <div class="layui-input-block">
                                <div class="choose-user-card" lay-click="choose">
                                    <div class="empty"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {:builderFormInit([
                        'title' => '充值账户',
                        'name' => 'account',
                        'options' => $assets
                    ])->getFormItemSelectHtml('account')}

                    {:builderFormInit([
                        'title' => '账户余额',
                        'name' => 'account_balance',
                        'placeholder' => '账户余额'
                    ])->getFormItemInputHtml('number', '', true)}

                    {:builderFormInit([
                        'title' => '充值方式',
                        'name' => 'mode',
                        'options' => [1 => '增加', 2 => '减少'],
                        'value'=> 1
                    ])->getFormItemCheckboxHtml('radio')}

                    {:builderFormInit([
                        'title' => '充值金额',
                        'name' => 'amount',
                        'placeholder'=>'请填写增加/减少的金额',
                        'req'=> true
                    ])->getFormItemInputHtml('number')}

                    {:builderFormInit([
                        'title' => '充值备注',
                        'name' => 'remarks',
                        'placeholder'=>'充值备注(选填)'
                    ])->getFormItemInputHtml()}
                </div>
            </div>
        </div>
        {include file="public/submit" /}
    </form>
</div>
</body>
{include file="public/footer" /}
<script type="text/html" id="userTpl">
    <input type="hidden" id="id" name="id" value="{{d.id}}">
    <div class="avatar">
        <img src="{{d.photo}}">
    </div>
    <div class="user-info">
        <div class="nickname">{{d.code}} - {{d.nickname}}</div>
        <div class="phone">{{d.mobile}}</div>
    </div>
</script>
<script>
    layui.use(['form', 'jquery', 'laytpl', 'layer', 'methods', 'edit'], function () {
        layui.edit.render();
        const jquery = layui.jquery, layer = layui.layer, methods = layui.methods, form = layui.form, laytpl = layui.laytpl;
        const getBalance = (uid, account) => {
            if (uid && account) {
                methods.fetchGet('{:url("user/checkBalance")}', {uid: uid, account: account}, (data) => {
                    if (data.code === 1) {
                        jquery('input[name="account_balance"]').val(data.data);
                    } else {
                        layer.msg(data.msg);
                    }
                });
            }
        }
        methods.event.click('choose', () => {
            methods.openTableLayer({title: '选择会员', url: '{:url("user/choose")}', row: true}, (data) => {
                laytpl(jquery('#userTpl').html()).render(data, function (html) {
                    jquery('.choose-user-card').html(html);
                });
                getBalance(data.id, jquery("#account").val());
            });
        });
        form.on('select(account)', (data) => {
            var id = jquery("#id").val();
            if (!id) {
                layer.msg('请先选择要充值的会员');
                return false;
            }
            data.value ? getBalance(id, data.value) : jquery('input[name="account_balance"]').val('');
        });
    });
</script>
</html>